<template>
	<div class="notice">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>公告管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="notice-a">
			<!--	搜索框	-->
			<div class="notice-search">
				<el-form ref="form" :inline="true" :model="searchForm" label-width="80px" size="medium">
					<el-form-item label="关键字">
						<el-input v-model="searchForm.notice_content"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 一堆按钮 新增 删除 -->
			<div class="notice-buttons">
				<div>
					<el-button type="primary" size="medium" @click="addNotice"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div>
					<el-button type="danger" size="medium" :disabled="delButton" @click="delSelect"><i class="el-icon-delete"></i> 删除</el-button>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="notice-table">
				<el-table
					:data="tableData"
					style="width: 100%"
					@selection-change="searchChange">
					<el-table-column
						type="selection"
						width="55px"
						align="center">
					</el-table-column>
					<el-table-column
						prop="notice_id"
						label="公告id"
						sortable>
					</el-table-column>
					<el-table-column
						prop="notice_img"
						label="公告图片"
						align="center">
						<template slot-scope="scope">
							<img :src="`http://localhost:8080/res/${scope.row.notice_img}`" height="40px"width="40px"/>
						</template>
					</el-table-column>
					<el-table-column
						prop="notice_content"
						label="公告内容"
						:show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
						prop="notice_time"
						label="发布时间"
						sortable>
						<template slot-scope="scope">
							{{scope.row.notice_time.substring(0,10)}}
						</template>
					</el-table-column>
					<el-table-column
						prop="notice_status"
						label="发布状态">
					</el-table-column>
					<el-table-column
						prop="foperate_flag"
						label="撤销标志">
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="200px"
						align="center">
						<template slot-scope="scope">
							<el-button @click="publishClick(scope.row)" type="text" ><i class="el-icon-circle-check"></i> 发布</el-button>
							<el-button @click="editClick(scope.row)" type="text" ><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text" ><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="notice-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="currentPage"
					:total="total"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 增加弹出窗 -->
			<div class="notice-dialog" >
				<el-dialog
					title="增加公告"
					:visible.sync="addDialogVisible"
					width="600px"
					top="15vh"
				>
					<div class="notice-dialog-from"><!-- 中间内容 -->
						<el-form :model="addForm" label-width="80px" size="small">
							<el-form-item label="公告内容" prop="notice_content">
								<el-input type="textarea" v-model="addForm.notice_content"></el-input>
							</el-form-item>
							<el-form-item label="公告图片">
								<el-upload ref="addUpload" action="" list-type="picture-card" :limit="1" :class="{hide:addHideUpload}" :on-change="addChangeImg"
								           :on-remove="addHandleRemove" :auto-upload="false" :file-list="addFileList" :multiple="false">
									<i class="el-icon-plus"></i>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit(addForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="notice-dialog" >
				<el-dialog
					title="编辑公告"
					:visible.sync="editDialogVisible"
					width="600px"
					top="15vh"
				>
					<div class="notice-dialog-from"><!-- 中间内容 -->
						<el-form :model="editForm" label-width="80px" size="small">
							<el-form-item label="公告内容" prop="notice_content">
								<el-input type="textarea" v-model="editForm.notice_content"></el-input>
							</el-form-item>
							<el-form-item label="公告图片">
								<el-upload ref="editUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editHideUpload}" :on-change="editChangeImg"
								           :on-remove="editHandleRemove" :auto-upload="false" :file-list="addFileList" :multiple="false">
									<img :src="`http://localhost:8080/res/${editForm.notice_img}`" height="146px" width="146px" style="opacity:0.5;"/>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(editForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
  import FoodService from "@/views/Food/FoodService";
	import NoticeService from "@/views/Notice/NoticeService";
  export default {
    name: "Notice",
    data(){
      return{
        searchForm:{
          notice_content:''
        },
        addForm:{
          food_img:''
        },
        editForm:{
          food_img:''
        },
        addFileList:[],
        editFileList:[],
        tableData:[],
        total:100,
        currentPage:1,
        pageSize:5,
        addDialogVisible:false,
        editDialogVisible:false,
        addHideUpload:false,
        editHideUpload:false,
        delButton:true,
        tableSelect:[]

      }
    },
    methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
        this.searchNotice();
      },
      //批量删除
      delSelect(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let list = this.tableSelect.map(item=>{
            return item.notice_id;
          })
          NoticeService.delNoticeAllService({
            deleteList: list
          },r=>{
            if(r.deleteGroupResult){
              this.$message({
                type: 'success',
                message: `删除成功`
              });
            }else{
              this.$message({
                type: 'error',
                message: `删除失败`
              });
            }
            this.searchNotice();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //增加
      addNotice(){
        this.addDialogVisible=true;
      },
	    //发布
      publishClick(row){
				NoticeService.editNoticeStatusService({
          notice_id:row.notice_id
				},r=>{
          this.$message({
            type: 'success',
            message: '发布成功!'
          });
          this.searchNotice();
				});
      },
      //编辑
      editClick(row){
        this.editDialogVisible=true;
        //console.log(row);
        this.editForm=row;

      },
      //单删
      delClick(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            NoticeService.delNoticeService({
              noticeid:row.notice_id
            },r=>{
              if(r.delete){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              }
              this.searchNotice();
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //页面跳转
      currentChange(val){
        this.pageNum=val;
        this.searchNotice();
      },
      //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchNotice();
      },
      //提交添加表单
      addSubmit(addFrom){
        this.addDialogVisible = false;
        let formData = new FormData();
        this.addFileList = this.$refs.addUpload.uploadFiles;
        let result = this.addFileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        });
        formData.append('notice_content',addFrom.notice_content);
        // formData.append('notice_time',(new Date()).Format("yyyy-MM-dd hh:mm:ss.S"))
        // addForm.notice_img=this.upload(this.addFileList);
        NoticeService.addNoticeService(
					formData
	        ,r=>{
            if(r.addResult){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchNotice();
          });
      },
      editSubmit(editFrom){
        this.editDialogVisible = false;
        let formData = new FormData();
        this.editFileList = this.$refs.editUpload.uploadFiles;
        let result = this.editFileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        });
        formData.append('notice_id',editFrom.notice_id);
        formData.append('notice_content',editFrom.notice_content);
        // formData.append('notice_time',(new Date()).Format("yyyy-MM-dd hh:mm:ss.S"))
        // addForm.notice_img=this.upload(this.addFileList);
        NoticeService.editNoticeService(
          formData
          ,r=>{
            if(r.modifyResult){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchNotice();
          });
      },
      //图片改变回调
      addChangeImg(file,fileList){
        this.addHideUpload = fileList.length >= 1;
      },
      //图片删除回调
      addHandleRemove(file,fileList){
        this.addHideUpload = fileList.length >= 1;
      },
      //图片改变回调
      editChangeImg(file,fileList){
        this.editHideUpload = fileList.length >= 1;
      },
      //图片删除回调
      editHandleRemove(file,fileList){
        this.editHideUpload = fileList.length >= 1;
      },
      //表格选择改变回调
      searchChange(select){
        //console.log(select);
        this.tableSelect = select;
        this.delButton = select.length == 0;
      },
      //搜索方法
      searchNotice(){
        console.log(`搜索ing：名称：${this.searchForm.notice_content}当前页：${this.pageNum}`)
        NoticeService.searchNoticeService({
          notice_content:this.searchForm.notice_content,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },r=>{
          this.tableData = r.searchByNameList.list;
          this.total = r.searchByNameList.total;
        })
      }
    },
    created(){
      this.searchForm.notice_content='';
      this.pageNum=1;
      this.pageSize=5;
      this.searchNotice()
    }
  }
</script>

<style lang="less">

	@import '../../style/Common.less';
	.notice-a{
		padding: 20px;
	}
	.notice-search{
		color: #606266;
		font-weight:bold;
	}
	.notice-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.notice-table{

	}
	.notice-page{
		height: 32px;
		margin: 20px 20px 20px 0;
		float: right;
	}
	.notice-dialog{
		.notice-dialog-from{
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>